<template>
<div>
  <Modal v-model="markerMapModal" title="选取楼位置" fullscreen  @on-ok="markerMapModalConfirm">
    <div id="HTmapMarkerForBuilding"></div>
  </Modal>
</div>
</template>

<script>
import { HTgetZoom, HTautoCenterTwo, HTpointAndPolygon } from '../../../../libs/HT-map-Util'
import { mapHTUrl } from '../../../../libs/mapTypeUtil'

export default {
  name: 'HTMapMarkerForBuilding',
  data () {
    return {
      markerMapModal: false,
      map: null,
      // url: 'http://124.95.134.62:8195/portalproxy/8yxaiziw/iserver/services/map-agscache-TuCeng/rest/maps/%E5%9B%BE%E5%B1%82?key=hvLjfz41XGTXMqg5XJA0RllL',
      // url: 'http://59.197.228.131:8195/portalproxy/8ip34l19/iserver/services/map-ErWeiDiTu11-24/rest/maps/%E4%BA%8C%E7%BB%B4%E5%BA%95%E5%9B%BE2022.11.17?key=BaNmpRn9Ur8aFRBnfRrZYg3v',
      // url: 'http://59.197.228.131:8195/portalproxy/m3cw1qye/iserver/services/map-ErWeiDiTu20221124/rest/maps/%E4%BA%8C%E7%BB%B4%E5%BA%95%E5%9B%BE20221124?key=y5Hd3UxzzhxSu91T8VM9LY9A',
      // url: 'https://ztcmap.tripln.top/portalproxy/2qnzt9re/iserver/services/map-ugcv5-ShenYangPeiTu/rest/maps/%E6%B2%88%E9%98%B3%E9%85%8D%E5%9B%BE?key=ftrH5IEH3GXpHCRJRI2K5lYV',
      url: mapHTUrl(),
      building_img: 'http://imgdl.tripln.top/webhdfs/v1/grid/label/label1656581442195_3347685345.png?op=OPEN&namenoderpcaddress=hadoop01:9000&offset=0',
      resultLatLng: [],
      returnObject: {}
    }
  },
  methods: {
    init (e) {
      this.choiceInfo = e
      let x = HTautoCenterTwo(this.choiceInfo.csc_mapjson_ht)
      this.markerMapModal = true
      let _this = this
      setTimeout(function () {
        _this.initMap(x)
      }, 1000)
    },
    updateInitMap (e1, e2) {
      this.choiceInfo = e2
      let buildingCscMapjson = e1.csc_mapjson_ht.split(',')
      let csc_mapjson_ht = JSON.parse(this.choiceInfo.csc_mapjson_ht)
      let x = csc_mapjson_ht
      x.push(csc_mapjson_ht[0])
      var result = HTpointAndPolygon([buildingCscMapjson[0], buildingCscMapjson[1]], [x])
      if (result) {
        let y = e1.csc_mapjson_ht.split(',')
        let center = [y[0], y[1]]
        this.markerMapModal = true
        let _this = this
        setTimeout(function () {
          _this.initMap(center)
        }, 1000)
      } else {
        this.$Notice.error({ title: '点位数据异常！', desc: '将使用默认点位！' })
        let center = HTautoCenterTwo(this.choiceInfo.csc_mapjson_ht)
        this.markerMapModal = true
        let _this = this
        setTimeout(function () {
          _this.initMap(center)
        }, 1000)
      }
    },
    initMap (e) {
      this.map = L.map('HTmapMarkerForBuilding', {
        crs: L.CRS.EPSG4326,
        preferCanvas: true,
        center: e,
        maxZoom: 18,
        minZoom: 9,
        zoom: 3,
        logoControl: false
      })
      L.supermap.tiledMapLayer(this.url).addTo(this.map)
      this.createMaker(e)
      this.map.setView(e, HTgetZoom(this.choiceInfo) - 2)
      this.createPolygon(this.choiceInfo.csc_mapjson_ht)
    },
    createMaker (latlng) {
      // const greenIcon = L.icon({
      //   iconUrl: this.building_img,
      //   iconSize: [20, 20]
      // })
      this.centerMarker = L.marker(latlng, {
        // icon: greenIcon
      }).addTo(this.map)
    },
    createPolygon (e) {
      var polygon = L.polygon(JSON.parse(e), { color: '#3CB371', smoothFactor: 0.5, opacity: 1, fillOpacity: 0.3 }).addTo(this.map).bringToBack()
      let _this = this
      polygon.on('click ', function (e) {
        console.log(e.latlng, 'click')
        _this.map.removeLayer(_this.centerMarker)
        _this.createMaker(e.latlng)
        _this.resultLatLng = []
        _this.resultLatLng.push(e.latlng.lat)
        _this.resultLatLng.push(e.latlng.lng)
      })
    },
    markerMapModalConfirm () {
      this.returnObject.csc_mapjson_ht = this.resultLatLng[0] + ',' + this.resultLatLng[1]
      this.$emit('HTreturnMapInfoForBuilding', this.returnObject)
    }
  },
  beforeDestroy () {
    this.map && this.map.remove()
  },
  watch: {
    markerMapModal (val) {
      if (!val) {
        this.map && this.map.remove()
      }
    }
  }
}
</script>

<style scoped>
#HTmapMarkerForBuilding {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
/deep/ .leaflet-top{
  top: 85%;
}
</style>
